<template>
  <el-card class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-card class="title" style="border: 1px solid #E9E9E9;padding: 10px; position: relative;">
        <span style="display: block;margin-left: 50px;"><h2>基本信息</h2></span>
        <div style="position: absolute;right: 20px;top: 60px;">
          <el-button type="success" @click="readIdCardBtnClick">读取身份证信息</el-button>
        </div>
        <el-row>
          <el-col :span="6">
            <el-form-item label="筛查序号" prop="queryId">
              <el-input v-model="form.queryId" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="身份证号" prop="idCard">
              <el-input v-model="form.idCard" @change="getAge(form.idCard)"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="姓名" prop="personName">
              <el-input v-model="form.personName"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="性别" prop="sex">
              <el-select v-model="form.sex" placeholder="请选择" style="width: 100%;">
                <el-option label="男" value="男"/>
                <el-option label="女" value="女"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="年龄" prop="age">
              <el-input v-model="form.age" placeholder="岁" @input="handleInput(form.age,'age',100,1,100)"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="民族" prop="nation">
              <el-input v-model="form.nation"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="身高(cm)">
              <el-input v-model="form.height" placeholder="cm" @change="calculateBMI()" @input="handleInput(form.height,'height',200,50,200)"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="体重(kg)">
              <el-input v-model="form.weight" placeholder="kg" @change="calculateBMI()" @input="handleInput(form.weight,'weight',200,10,200)"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="BMI">
              <el-input v-model="form.bmi" disabled placeholder="体重/身高^2"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="腰围(cm)">
              <el-input v-model="form.waistline" placeholder="cm" @input="handleInput(form.waistline,'waistline',200,10,200)"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="臀围(cm)">
              <el-input v-model="form.hipline" placeholder="cm" @input="handleInput(form.hipline,'hipline',200,10,200)"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="婚姻状况" prop="maritalStatus">
              <el-select v-model="form.maritalStatus" placeholder="请选择" style="width: 100%;">
                <el-option label="未婚" value="未婚"/>
                <el-option label="已婚" value="已婚"/>
                <el-option label="离异" value="离异"/>
                <el-option label="孀居" value="孀居"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="初婚年龄" prop="firstMarriageAge">
              <el-input v-model="form.firstMarriageAge" :disabled="form.maritalStatus=='未婚'" @input="handleInput(form.firstMarriageAge,'firstMarriageAge',200,10,100)" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="家庭住址" prop="homeAddress">
              <el-input v-model="form.homeAddress" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="职业" prop="career">
              <el-select v-model="form.career" placeholder="请选择" style="width: 100%;">
                <el-option label="公务员" value="公务员"/>
                <el-option label="企业事业员工" value="企业事业员工"/>
                <el-option label="工人" value="工人"/>
                <el-option label="个体户" value="个体户"/>
                <el-option label="农民" value="农民"/>
                <el-option label="无业" value="无业"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="学历" prop="education">
              <el-select v-model="form.education" placeholder="请选择" style="width: 100%;">
                <el-option label="小学以下" value="小学以下"/>
                <el-option label="初中" value="初中"/>
                <el-option label="高中或中专" value="高中或中专"/>
                <el-option label="大专以上" value="大专以上"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="电话" prop="phone">
              <el-input v-model="form.phone" @input="handleInput(form.phone,'phone',1000, 1, 11)" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="筛查单位" prop="queryUnit">
              <el-select v-model="form.queryUnit" placeholder="请选择" filterable remote :remote-method="fetchUnitOptions"  @change="queryUnitChange" style="width: 100%;">
                <el-option
                  v-for="item in this.selectedUnit.options"
                  :key="item.code"
                  :label="item.name+ ' - '+ item.code"
                  :value="item.code">
                </el-option>
                <div class="pagination-css">
                  <el-pagination @size-change="handleUnitSizeChange" @current-change="handleUnitCurrentChange" :current-page="this.selectedUnit.currentPage"
                                 :page-sizes="[2, 5, 10, 15]" :page-size="this.selectedUnit.pageSize" layout="total, prev, pager, next, sizes"
                                 :total="this.selectedUnit.total">
                  </el-pagination>
                </div>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="预约时间" prop="preTime">
              <el-date-picker v-model="form.preTime" type="date" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择时间" style="width: 100%;"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="主检医师" prop="chiefPhysician">
              <el-select v-model="form.chiefPhysician" filterable remote :remote-method="fetchDoctorOptions"
                         :loading="loading" placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="item in this.selectedDoctor.options"
                  :key="item.name"
                  :label="item.name+ ' - '+ item.department"
                  :value="item.name">
                </el-option>
                <div class="pagination-css">
                  <el-pagination @size-change="handleDoctorSizeChange" @current-change="handleDoctorSizeChange" :current-page="this.selectedDoctor.currentPage"
                                 :page-sizes="[2, 5, 10, 15]" :page-size="this.selectedDoctor.pageSize" layout="total, prev, pager, next, sizes"
                                 :total="this.selectedDoctor.total">
                  </el-pagination>
                </div>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="复核医师">
              <el-select v-model="form.recheckPhysician" filterable remote :remote-method="fetchDoctorOptions"
                         :loading="loading" placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="item in this.selectedDoctor.options"
                  :key="item.name"
                  :label="item.name+ ' - '+ item.department"
                  :value="item.name">
                </el-option>
                <div class="pagination-css">
                  <el-pagination @size-change="handleDoctorSizeChange" @current-change="handleDoctorSizeChange" :current-page="this.selectedDoctor.currentPage"
                                 :page-sizes="[2, 5, 10, 15]" :page-size="this.selectedDoctor.pageSize" layout="total, prev, pager, next, sizes"
                                 :total="this.selectedDoctor.total">
                  </el-pagination>
                </div>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

      </el-card>

      <el-row>
        <div clss="" style="height: 60px;"></div>
      </el-row>

      <el-card>
        <span style="display: block;margin-left: 50px;text-align: center;"><h1>流行病学数据采集</h1></span>

        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>月经史</span>
            <!--            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
          </div>
          <div class="text item">
            <el-row>
              <el-col :span="4">
                <el-form-item label="月经初潮年龄">
                  <el-input v-model="form.epidemiologicalInfoDTO.menarcheAge" placeholder="岁" @input="handleInput(form.epidemiologicalInfoDTO.menarcheAge,'menarcheAge',1000,5,60)"/>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="周期：约">
                  <el-input v-model="form.epidemiologicalInfoDTO.cycle" placeholder="天" @input="handleInput(form.epidemiologicalInfoDTO.cycle,'cycle',1000,5,90)" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="经期：约">
                  <el-input v-model="form.epidemiologicalInfoDTO.menstrualPeriod" placeholder="天" @input="handleInput(form.epidemiologicalInfoDTO.menstrualPeriod,'menstrualPeriod',1000,1,30)" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="是否痛经">
                  <el-select v-model="form.epidemiologicalInfoDTO.isDysmenorrhea" placeholder="请选择" style="width: 100%;">
                    <el-option label="是" value="1"/>
                    <el-option label="否" value="0"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="是否绝经">
                  <el-select v-model="form.epidemiologicalInfoDTO.isMenopause" placeholder="请选择" style="width: 100%;">
                    <el-option label="是" value="1"/>
                    <el-option label="否" value="0"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="绝经年龄" v-if="form.epidemiologicalInfoDTO.isMenopause == 1">
                  <el-input v-model="form.epidemiologicalInfoDTO.menopauseAge" placeholder="岁" @input="handleInput(form.epidemiologicalInfoDTO.menopauseAge,'menopauseAge',1000,5,100)" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-card>

        <el-row>
          <div clss="" style="height: 20px;"></div>
        </el-row>

        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>孕育史</span>
            <!--            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
          </div>
          <div class="text item">
            <el-row>
              <el-col :span="4">
                <el-form-item label="是否妊娠过">
                  <el-select v-model="form.epidemiologicalInfoDTO.hasPregnancy" placeholder="请选择" style="width: 100%;"
                             @change="changeTitle('hasPregnancy','firstPregnancyAge,firstPregnancyAge,pregnancyCount,abortionCount,totalPregnancyTime,hasGivenBirth,firstBirthAge,birthCount,fullTermPregnancyCount,firstBornPregnancyAge')">
                    <el-option label="是" value="1"/>
                    <el-option label="否" value="0"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="初次妊娠年龄" v-if="form.epidemiologicalInfoDTO.hasPregnancy == 1">
                  <el-input v-model="form.epidemiologicalInfoDTO.firstPregnancyAge" placeholder="岁"  @input="handleInput(form.epidemiologicalInfoDTO.firstPregnancyAge,'firstPregnancyAge',70)"/>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="妊娠次数" v-if="form.epidemiologicalInfoDTO.hasPregnancy == 1">
                  <el-input v-model="form.epidemiologicalInfoDTO.pregnancyCount" placeholder="次"  @input="handleInput(form.epidemiologicalInfoDTO.pregnancyCount,'pregnancyCount',10)" />
                </el-form-item>
              </el-col>

              <el-col :span="4">
                <el-form-item label="流产次数" v-if="form.epidemiologicalInfoDTO.hasPregnancy == 1">
                  <el-input v-model="form.epidemiologicalInfoDTO.abortionCount" placeholder="次" @input="handleInput(form.epidemiologicalInfoDTO.abortionCount,'abortionCount',10)" />
                </el-form-item>
              </el-col>

              <el-col :span="4">

              </el-col>
              <el-col :span="4">
                <el-form-item label="总妊娠时间" v-if="form.epidemiologicalInfoDTO.hasPregnancy == 1" label-width="200px">
                  <el-input v-model="form.epidemiologicalInfoDTO.totalPregnancyTime" placeholder="月" @input="handleInput(form.epidemiologicalInfoDTO.totalPregnancyTime,'totalPregnancyTime',10)"/>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="4">
                <el-form-item label="是否生育过"  v-if="form.epidemiologicalInfoDTO.hasPregnancy == 1">
                  <el-select v-model="form.epidemiologicalInfoDTO.hasGivenBirth" placeholder="请选择"
                             @change="changeTitle('hasGivenBirth','firstBirthAge,birthCount,fullTermPregnancyCount,firstBornPregnancyAge')"  style="width: 100%;">
                    <el-option label="是" value="1"/>
                    <el-option label="否" value="0"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4" v-if="form.epidemiologicalInfoDTO.hasGivenBirth == 1 && form.epidemiologicalInfoDTO.hasPregnancy == 1" >
                <el-form-item label="初次生产年龄">
                  <el-input v-model="form.epidemiologicalInfoDTO.firstBirthAge" placeholder="岁" @input="handleInput(form.epidemiologicalInfoDTO.firstBirthAge,'firstBirthAge',70)" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="生产次数" v-if="form.epidemiologicalInfoDTO.hasGivenBirth == 1 && form.epidemiologicalInfoDTO.hasPregnancy == 1">
                  <el-input v-model="form.epidemiologicalInfoDTO.birthCount" placeholder="次" @input="handleInput(form.epidemiologicalInfoDTO.birthCount,'birthCount',10)" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="足月产妊娠次数" v-if="form.epidemiologicalInfoDTO.hasGivenBirth == 1 && form.epidemiologicalInfoDTO.hasPregnancy == 1">
                  <el-input v-model="form.epidemiologicalInfoDTO.fullTermPregnancyCount" placeholder="次" @input="handleInput(form.epidemiologicalInfoDTO.fullTermPregnancyCount,'fullTermPregnancyCount',10)"/>
                </el-form-item>
              </el-col>
              <el-col :span="4">

              </el-col>
              <el-col :span="4">
                <el-form-item label="初次足月产妊娠年龄" v-if="form.epidemiologicalInfoDTO.hasGivenBirth == 1 && form.epidemiologicalInfoDTO.hasPregnancy == 1" label-width="200px">
                  <el-input v-model="form.epidemiologicalInfoDTO.firstBornPregnancyAge" placeholder="岁" @input="handleInput(form.epidemiologicalInfoDTO.firstBornPregnancyAge,'firstBornPregnancyAge',70)" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-card>

        <el-card class="box-card" style="margin-top: 20px;">
          <div slot="header" class="clearfix">
            <span>哺乳情况</span>
            <!--            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
          </div>
          <div class="text item">
            <el-row>
              <el-col :span="4">
                <el-form-item label="是否母乳喂养" v-if="form.epidemiologicalInfoDTO.hasPregnancy == 1 && form.epidemiologicalInfoDTO.hasGivenBirth == 1" label-width="200px">
                  <el-select v-model="form.epidemiologicalInfoDTO.isBreastfeeding"   placeholder="请选择"
                             @change="changeTitle('isBreastfeeding','breastfeedingStartAge,breastfeedingLongestTime,totalBreastfeedingTime')" style="width: 100%;">
                    <el-option label="是" value="1"/>
                    <el-option label="否" value="0"/>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4" v-if="form.epidemiologicalInfoDTO.isBreastfeeding == 1 && form.epidemiologicalInfoDTO.hasPregnancy == 1 && form.epidemiologicalInfoDTO.hasGivenBirth == 1" >
                <el-form-item label="开始母乳喂养的年龄" label-width="200px">
                  <el-input v-model="form.epidemiologicalInfoDTO.breastfeedingStartAge" placeholder="岁" @input="handleInput(form.epidemiologicalInfoDTO.breastfeedingStartAge,'breastfeedingStartAge',60)" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label-width="200px" label="单次喂养最长时间" v-if="form.epidemiologicalInfoDTO.isBreastfeeding == 1 && form.epidemiologicalInfoDTO.hasPregnancy == 1 && form.epidemiologicalInfoDTO.hasGivenBirth == 1">
                  <el-input v-model="form.epidemiologicalInfoDTO.breastfeedingLongestTime" placeholder="年" @input="handleInput(form.epidemiologicalInfoDTO.breastfeedingLongestTime,'breastfeedingLongestTime',120)" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label-width="200px" label="总喂养是时间" v-if="form.epidemiologicalInfoDTO.isBreastfeeding == 1 && form.epidemiologicalInfoDTO.hasPregnancy == 1 && form.epidemiologicalInfoDTO.hasGivenBirth == 1">
                  <el-input v-model="form.epidemiologicalInfoDTO.totalBreastfeedingTime" placeholder="次" @input="handleInput(form.epidemiologicalInfoDTO.totalBreastfeedingTime,'totalBreastfeedingTime',120)" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-card>

        <el-card class="box-card" style="margin-top: 20px;">
          <div slot="header" class="clearfix">
            <span>饮酒史</span>
            <!--            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
          </div>
          <div class="text item">
            <el-row>
              <el-col :span="4">
                <el-form-item label="是否饮酒" label-width="200px">
                  <el-select v-model="form.epidemiologicalInfoDTO.isDrinking" placeholder="请选择"
                             @change="changeTitle('isDrinking','drinkingStartAge,drinkingYears,drinkingFrequency,alcoholConsumption')" style="width: 100%;">
                    <el-option label="是" value="1"/>
                    <el-option label="否" value="0"/>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4" v-if="form.epidemiologicalInfoDTO.isDrinking == 1" >
                <el-form-item label="开始饮酒年龄" label-width="200px">
                  <el-input v-model="form.epidemiologicalInfoDTO.drinkingStartAge" placeholder="岁" @input="handleInput(form.epidemiologicalInfoDTO.drinkingStartAge,'drinkingStartAge',1000,0,99)" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="饮酒年限" v-if="form.epidemiologicalInfoDTO.isDrinking == 1" label-width="200px">
                  <el-input v-model="form.epidemiologicalInfoDTO.drinkingYears" placeholder="年" @input="handleInput(form.epidemiologicalInfoDTO.drinkingYears,'drinkingYears',1000,0,99)" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="饮酒频次" v-if="form.epidemiologicalInfoDTO.isDrinking == 1" label-width="200px">
                  <el-select label="饮酒频次" v-model="form.epidemiologicalInfoDTO.drinkingFrequency" placeholder="请选择" style="width: 100%;">
                    <el-option label="偶尔" value="偶尔"/>
                    <el-option label="经常" value="经常"/>
                    <el-option label="每日" value="每日"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">

              </el-col>
              <el-col :span="4">
                <el-form-item label="饮酒量" v-if="form.epidemiologicalInfoDTO.isDrinking == 1" label-width="200px">
                  <el-input v-model="form.epidemiologicalInfoDTO.alcoholConsumption" placeholder="毫升/天" @input="handleInput(form.epidemiologicalInfoDTO.alcoholConsumption,'alcoholConsumption',1000,0,2500)" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-card>

        <el-card class="box-card" style="margin-top: 20px;">
          <div slot="header" class="clearfix">
            <span>吸烟史</span>
            <!--            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
          </div>
          <div class="text item">
            <el-row>
              <el-col :span="4">
                <el-form-item label="是否吸烟" label-width="200px">
                  <el-select v-model="form.epidemiologicalInfoDTO.isSmoking" placeholder="请选择"
                             @change="changeTitle('isSmoking','smokingStartAge,smokingYears,smokingAmount')" style="width: 100%;">
                    <el-option label="是" value="1"/>
                    <el-option label="否" value="0"/>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4" v-if="form.epidemiologicalInfoDTO.isSmoking == 1" >
                <el-form-item label="开始吸烟年龄" label-width="200px">
                  <el-input v-model="form.epidemiologicalInfoDTO.smokingStartAge" placeholder="岁" @input="handleInput(form.epidemiologicalInfoDTO.smokingStartAge,'smokingStartAge',1000,0,99)" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="吸烟年限" v-if="form.epidemiologicalInfoDTO.isSmoking == 1" label-width="200px">
                  <el-input v-model="form.epidemiologicalInfoDTO.smokingYears" placeholder="年" @input="handleInput(form.epidemiologicalInfoDTO.smokingYears,'smokingYears',1000,0,99)" />
                </el-form-item>
              </el-col>
              <el-col :span="4">

              </el-col>
              <el-col :span="4">

              </el-col>
              <el-col :span="4">
                <el-form-item label="吸烟量" v-if="form.epidemiologicalInfoDTO.isSmoking == 1" label-width="200px">
                  <el-input v-model="form.epidemiologicalInfoDTO.smokingAmount" placeholder="毫升/天" @input="handleInput(form.epidemiologicalInfoDTO.smokingAmount,'smokingAmount',1000,0,2500)" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-card>


        <el-card class="box-card" style="margin-top: 20px;">
          <div slot="header" class="clearfix">
            <span>既往史</span>
            <!--            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
          </div>
          <div class="text item">
            <el-row>
              <el-col :span="5">
                <el-form-item label="既往乳腺良性病史" label-width="200px">
                  <el-select v-model="form.epidemiologicalInfoDTO.breastBenignHistory" placeholder="请选择" style="width: 100%;">
                    <el-option label="乳腺炎" value="乳腺炎"/>
                    <el-option label="乳腺纤维瘤" value="乳腺纤维瘤"/>
                    <el-option label="导管内乳头状瘤" value="导管内乳头状瘤"/>
                    <el-option label="其他" value="其他"/>
                    <el-option label="否" value="否"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="激素替代质量情况" label-width="200px">
                  <el-select v-model="form.epidemiologicalInfoDTO.hormoneReplacementTherapy" placeholder="请选择" style="width: 100%;">
                    <el-option label="是" value="1"/>
                    <el-option label="否" value="0"/>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-card>

        <el-card class="box-card" style="margin-top: 20px;">
          <div slot="header" class="clearfix">
            <span>家族史</span>
            <!--            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
          </div>
          <div class="text item">
            <el-row>
              <el-col :span="24">
                <el-form-item label="个人或以及亲属乳腺癌、卵巢癌或子宫内膜癌病史" label-width="380px">
                  <el-select v-model="form.epidemiologicalInfoDTO.familyHistory" placeholder="请选择" style="width: 100%;">
                    <el-option label="一级亲属（父母、子女、兄弟姐妹）" value="一级亲属（父母、子女、兄弟姐妹）"/>
                    <el-option label="二级亲属(祖父母、外祖父母、叔伯、姑、姨、)" value="二级亲属(祖父母、外祖父母、叔伯、姑、姨、)"/>
                    <el-option label="三级亲属(表兄妹、堂兄妹)" value="三级亲属(表兄妹、堂兄妹)"/>
                    <el-option label="否" value="否"/>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-card>

        <el-card class="box-card" style="margin-top: 20px;">
          <div slot="header" class="clearfix">
            <span>糖尿病史</span>
            <!--            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
          </div>
          <div class="text item">
            <el-row>
              <el-col :span="4">
                <el-form-item label="有无糖尿病史">
                  <el-select v-model="form.epidemiologicalInfoDTO.isDiabetesHistory" placeholder="请选择"
                             @change="changeTitle('isDiabetesHistory','diabetesYears, isDiabetesMedication')" style="width: 100%;">
                    <el-option label="是" value="1"/>
                    <el-option label="否" value="0"/>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4" >
                <template v-if="form.epidemiologicalInfoDTO.isDiabetesHistory == 1">
                  <el-form-item label="糖尿病年限">
                    <el-input v-model="form.epidemiologicalInfoDTO.diabetesYears" placeholder="年" @input="handleInput(form.epidemiologicalInfoDTO.diabetesYears,'diabetesYears',120)" />
                  </el-form-item>
                </template>
              </el-col>
              <el-col :span="6">
                <el-form-item label="是否使用二甲双胍等药物进行治疗" label-width="280px" v-if="form.epidemiologicalInfoDTO.isDiabetesHistory == 1">
                  <el-select v-model="form.epidemiologicalInfoDTO.isDiabetesMedication" placeholder="请选择" style="width: 100%;">
                    <el-option label="是" value="1"/>
                    <el-option label="否" value="0"/>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-card>

      </el-card>

      <el-row>
        <div clss="" style="height: 60px;"></div>
      </el-row>

      <div class="fixed-div">
        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
          <el-button @click="onCancel">取消</el-button>
        </el-form-item>
      </div>

    </el-form>
  </el-card>
</template>

<script>

import { getPerson, addPerson, updatePerson, readIdCardInfo } from '@/api/business/Person';
import {listDoctors} from '@/api/business/doctors';
import {listMedicalInfo} from '@/api/business/medicalInfo';
import moment from "moment";
import axios from "axios";
export default {
  data() {
    return {
      isDiabetesHistory: false,
      loading: true,
      selectedDoctor:{
        pageSize: 10,
        currentPage: 1,
        options: [],
      },
      selectedUnit:{
        pageSize: 10,
        currentPage: 1,
        total: 0,
        options: [],
      },
      form: {
        idCard: "",
        maritalStatus: "",
        firstMarriageAge: "",
        nation: "",
        personName: "",
        phone: "",
        preTime: "",
        queryId: "",
        queryUnit: "",
        recheckPhysician: "",
        sex: "",
        career: "",
        chiefPhysician: "",
        education: "",
        waistline: "",
        weight: "",
        age: "",
        bmi: "",
        height: "",
        hipline: "",
        epidemiologicalInfoDTO:{
          isDysmenorrhea:"0",
          isMenopause:"0",
          isDrinking:"0",
          isSmoking:"0",
          familyHistory:"0",
          isDiabetesHistory:"0"
        }
      },
      rules: {
        idCard: [
          { required: true, message: '身份证号不能为空', trigger: 'blur' },
          { pattern: /^\d{17}[\d|X]$/, message: '身份证号格式不正确', trigger: 'blur' }
        ],
        personName: [
          { required: true, message: '姓名不能为空', trigger: 'blur' },
          { min: 2, max: 10, message: '姓名长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '电话号码不能为空', trigger: 'blur' },
          { pattern: /^1[3|4|5|7|8][0-9]{9}$/, message: '电话号码格式不正确', trigger: 'blur' }
        ],
        maritalStatus: [
          { required: true, message: '婚姻状况不能为空', trigger: 'blur' }
        ],
        nation: [
          { required: true, message: '民族不能为空', trigger: 'blur' }
        ],
        preTime: [
          { required: true, message: '预产期不能为空', trigger: 'blur' }
        ],
        queryId: [
          { required: true, message: '查询号不能为空', trigger: 'blur' }
        ],
        queryUnit: [
          { required: true, message: '查询单位不能为空', trigger: 'blur' }
        ],
        recheckPhysician: [
          { required: true, message: '复查医生不能为空', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '性别不能为空', trigger: 'blur' }
        ],
        career: [
          { required: true, message: '职业不能为空', trigger: 'blur' }
        ],
        chiefPhysician: [
          { required: true, message: '主治医生不能为空', trigger: 'blur' }
        ],
        education: [
          { required: true, message: '学历不能为空', trigger: 'blur' }
        ],
        waistline: [
          { required: true, message: '腰围不能为空', trigger: 'blur' }
        ],
        weight: [
          { required: true, message: '体重不能为空', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '年龄不能为空', trigger: 'blur' }
        ],
        bmi: [
          { required: true, message: 'BMI不能为空', trigger: 'blur' }
        ],
        height: [
          { required: true, message: '身高不能为空', trigger: 'blur' }
        ],
        hipline: [
          { required: true, message: '臀围不能为空', trigger: 'blur' }
        ]
        // 其他字段的验证规则


      }

    }
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      let params = this.$route.params;
      this.addOrEditType = params.type;

      this.fetchDoctorOptions();
      this.fetchUnitOptions();
      if (params.type === "add") {
        this.form.preTime = moment().format('YYYY-MM-DD HH:mm:ss');
      } else if (params.type === "edit") {
        getPerson(params.data.id).then(data => {
          this.form = data.data;
        });
      } else {
        this.$router.push({name: 'Person', params: {}});
      }

    },
    onSubmit() {
      console.log(this.form);
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submitForm();
        } else {
          return false;
        }
      });
    },
    async submitForm() {
      console.log(123123);
      let type = this.addOrEditType;
      let result;
      //日期转换转 yyyy-MM-dd HH:mm:ss 格式
      let formattedDate = moment(this.form.preTime).format('YYYY-MM-DD HH:mm:ss');

      this.form.preTime = formattedDate;

      if (type === "add") {
        await addPerson(this.form).then(data => {
          result = data;
        });
      } else if (type === "edit") {
        await updatePerson(this.form).then(data => {
          result = data;
        });
      }
      if (result.isSuccess) {
        this.$notify.success({
          title: "成功",
          message: result.message
        });
        this.$router.push({name: 'Person', params: {}});
      } else {
        this.$notify.error({
          title: "失败",
          message: result.message
        });
      }
    },
    onCancel() {
      this.$confirm('确认取消？')
        .then(() => {

          this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
            const latestView = visitedViews.slice(-1)[0]
            if (latestView) {
              // this.$router.push(latestView.fullPath)
              this.$router.push({name: 'Person', params: {}});
            }
          });


        })
        .catch(() => {
          this.$message.info('已取消')
        });
    },
    handleInput(inputContent, input, type, min, max) {
      let regExpString = "";
      if (type == 10) {
        regExpString = /^([1-9]|10)$/;
      } else if (type == 60) {
        regExpString = /^(1|[1-5]\d{0,1}|60)$/;
      } else if (type == 70) {
        regExpString = /^(1\d|20|[1-5]\d{0,1}|60)$/;
      } else if (type == 120) {
        regExpString = /^(0|120|\d{1,2}|1[0-1]\d)$/;
      } else if (type == 1000) {
        regExpString = new RegExp('^([1-9]|[1-' + (Math.floor(max / 10) - 1) + ']\\d|' + max + ')$');
      } else if (type == 200) {
        regExpString = /^\d*\.{0,1}\d{0,2}$/;
        console.log(inputContent, input, type, min, max);
      } else {
        regExpString = /^(1|[1-9]\d{0,1}|100)$/;
      }
      if (regExpString.test(inputContent) == false) {
        this.form.epidemiologicalInfoDTO[input] = "";
        this.form[input] = "";
        return false;
      } else {
        this.form.epidemiologicalInfoDTO[input] = inputContent;
        this.form[input] = inputContent;
      }
    },
    queryUnitChange(value) {   //查询单位变更时，清空查询号   待优化   目前只能清空查询号
      console.log(value);
      //获取时间毫秒数
      let time = new Date().getTime();
      //获取日期格式20210101
      let date = new Date().toLocaleDateString().replace(/\//g, "");
      //按照每日不重复id生成查询号
      this.form.queryId = value + date + time;
    },
    // 医生选项
    fetchDoctorOptions(name) {
      // if (name !== '') {
      this.loading = true;
      let params = {
        page: this.selectedDoctor.currentPage,
        limit: this.selectedDoctor.pageSize,
        name: name
      }
      // 模拟异步请求，实际中替换为你的API调用
      // 这里的mockData应该是从后端获取的分页数据
      listDoctors(params).then(({data}) => {
        this.selectedDoctor.options = data.list;
        this.selectedDoctor.total = data.total;
        this.selectedDoctor.currentPage = data.currentPage;
        this.selectedDoctor.pageSize = data.pageSize;
      });
      this.loading = false;
      // } else {
      //   this.selectedDoctor.options = [];
      // }
    },
    // 单位选项
    fetchUnitOptions(name) {
      this.loading = true;
      let params = {   //查询单位变更时，清空查询号   待优化   目前只能清空查询号
        page: this.selectedUnit.currentPage,
        limit: this.selectedUnit.pageSize,
        name: name
      }
      // 模拟异步请求，实际中替换为你的API调用
      // 这里的mockData应该是从后端获取的分页数据
      listMedicalInfo(params).then(({data}) => {
        this.selectedUnit.options = data.list;
        this.selectedUnit.total = data.total;
        this.selectedUnit.currentPage = data.currentPage;
        this.selectedUnit.pageSize = data.pageSize;
      });
      this.loading = false;
    },
    // 分页相关
    handleDoctorSizeChange(val,type) {
      console.log(`每页 ${val} 条`);
        this.selectedDoctor.pageSize = val;
        this.fetchDoctorOptions();
    },
    handleDoctorCurrentChange(val,type) {
      console.log(`当前页: ${val}`);
        this.selectedDoctor.currentPage = val;
        this.fetchDoctorOptions();
    },    // 分页相关
    handleUnitSizeChange(val,type) {
      console.log(`每页 ${val} 条`);
        this.selectedUnit.pageSize = val;
        this.fetchUnitOptions();
    },
    handleUnitCurrentChange(val,type) {
      console.log(`当前页: ${val}`);
        this.selectedUnit.currentPage = val;
        this.fetchUnitOptions();
    },
    changeTitle(checkName, cleanTargetName) {
      if (this.form.epidemiologicalInfoDTO[checkName] === "0") {
        cleanTargetName.split(",").forEach(item => {
          this.form.epidemiologicalInfoDTO[item] = "";
        });
      }
    },
    //根据身份证获取年龄
    getAge(idCard) {
      if (idCard.length === 18) {
        let birthday = idCard.substring(6, 14);
        console.log(birthday);
        const formattedDateString = birthday.replace(
          /(\d{4})(\d{2})(\d{2})/,
          "$1-$2-$3"
        );
        let birth = new Date(formattedDateString);
        console.log(birth);
        let age = new Date().getFullYear() - birth.getFullYear();
        let month = new Date().getMonth() - birth.getMonth();
        if (month < 0 || (month === 0 && new Date().getDate() < birth.getDate())) {
          age--;
        }
        this.form.age = age;
      } else {
        this.form.age = "";
      }
    },
    //根据身高体重计算BIM
    calculateBMI() {
      if (this.form.height && this.form.weight) {
        let height = parseFloat(this.form.height/100);
        let weight = parseFloat(this.form.weight);

        if (!isNaN(height) && !isNaN(weight)) {
          let bmi = (weight / (height * height)).toFixed(2);
          this.form.bmi = bmi
        }
      } else {
        this.form.bmi = "";
      }
    },
    readIdCardBtnClick() {

      axios.get('http://192.168.2.14:9999/jarvis/biz/getIdCarDInfo', {
        params: {
          idCard: this.form.idCard
        }
      }).then(response => {
        console.log(response.data);
        // alert(response.data.code === "-1");
        if (response.data.code === "-1") {
          this.$message.error(response.data.msg);
          return;
        }
        this.form.personName = response.data.Name;   //姓名
        this.form.sex = response.data.Gender;   //性别
        this.form.nation = response.data.Folk;   //民族
        this.form.homeAddress = response.data.Address;   //地址
        this.form.idCard = response.data.Code;   //身份证号
        this.getAge(response.data.Code);   //年龄
      }).catch(error => {
        console.log(error);
        this.$message.error('读取身份证信息失败，请检查读卡器连接是否正常！');
      });
    }
  }
}
</script>

<style scoped>
.line {
  text-align: center;
}
.fixed-div {
  //position: fixed;
  //top: 100px; /* 距离顶部100像素 */
  //right: 0; /* 右侧对齐 */
  //width: 200px; /* 宽度设置为200像素 */
  //height: 150px; /* 高度设置为150像素 */
  //background-color: #333; /* 背景颜色设置为深灰色 */
  //color: white; /* 文字颜色设置为白色 */
  //padding: 10px; /* 内边距设置为10像素 */
  //box-sizing: border-box; /* 盒模型大小包含内边距 */
  position: fixed;
  bottom: 40px;
  right: 0;
  width: 345px;
  height: 60px;
  /* background-color: #333; */
  color: white;
  padding: 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
  background-color: #8eb3ea;
}

.el-select-dropdown__item {
  border-bottom: 1px solid #e4e4e4;
}




.pagination-css {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.pagination-container.is-background .el-pager li {
  /* 对页数的样式进行修改 */
  background-color: #fff;
  color: #333;
}
.pagination-container.is-background .btn-next {
  /* 对下一页的按钮样式进行修改 */
  background-color: #fff;
  border: 1px solid #b3bfce;
  border-radius: 2px;
  color: #b3bfce;
}
.pagination-container.is-background .btn-prev {
  /* 对上一页的按钮样式进行修改 */
  background-color: #fff;
  border: 1px solid #b3bfce;
  border-radius: 2px;
  color: #b3bfce;
}
.pagination-container.is-background .el-pager li:not(.disabled).active {
  /* 当前选中页数的样式进行修改 */
  background-color: #0062ff;
  color: #fff;
}
</style>

